<template>
  <div class="bottom-tab">
    <span class="tab-item" @click="switchTo('/home')">
      <img
        :src="this.$route.path.includes('/home')?this.tabBarIconArr[0].active:this.tabBarIconArr[0].normal"
        alt
      />
      <span :class="{on:this.$route.path.includes('/home') }">首页</span>
    </span>
    <span class="tab-item" @click="switchTo('/recommend')">
      <img
        :src="this.$route.path==='/recommend'?this.tabBarIconArr[1].active:this.tabBarIconArr[1].normal"
        alt
      />
      <span :class="{on:this.$route.path==='/recommend'}">推荐</span>
    </span>
    <span class="tab-item" @click="switchTo('/search')">
      <img
        :src="this.$route.path==='/search'?this.tabBarIconArr[2].active:this.tabBarIconArr[2].normal"
        alt
      />
      <span :class="{on:this.$route.path==='/search'}">搜索</span>
    </span>
    <span class="tab-item" @click="switchTo('/chat')">
      <img
        :src="this.$route.path==='/chat'?this.tabBarIconArr[3].active:this.tabBarIconArr[3].normal"
        alt
      />
      <span :class="{on:this.$route.path==='/chat'}">聊天</span>
    </span>
    <span class="tab-item" @click="switchTo('/me')">
      <img
        :src="this.$route.path==='/me'?this.tabBarIconArr[4].active:this.tabBarIconArr[4].normal"
        alt
      />
      <span :class="{on:this.$route.path==='/me'}">我的</span>
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabBarIconArr: [
        {
          normal: require("../../../static/img/homeIcon.png"),
          active: require("../../../static/img/homeIconAct.png")
        },
        {
          normal: require("../../../static/img/recommendIcon.png"),
          active: require("../../../static/img/recommendIconA.png")
        },
        {
          normal: require("../../../static/img/SearchIcon.png"),
          active: require("../../../static/img/SearchIconAct.png")
        },
        {
          normal: require("../../../static/img/chatIcon.png"),
          active: require("../../../static/img/chatIconAct.png")
        },
        {
          normal: require("../../../static/img/meIcon.png"),
          active: require("../../../static/img/meIconActive.png")
        }
      ]
    };
  },
  methods: {
    switchTo(path) {
      // console.log(this.$router)
      this.$router.replace(path);
    }
  }
};
</script>
<style lang='scss' scoped>
.bottom-tab {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  
  .tab-item {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    color: #8e8e90;
  }
  img {
    width: 40%;
  }
  .on {
    color: red;
  }
}
</style>